<!--
 * @Description: 关联权限列表
 * @Autor: zhangzhanhua
 * @Date: 2021-11-17 09:04:28
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-11-25 16:59:18
-->
<template>
    <div class="detailList">
        <div style="padding:0 10px">
            <div class="search">
                <div class="search_input">
                    <el-input v-model="searchForm.authoritycode" placeholder="权限编码" style="margin-right:15px;width:140px;" clearable size="mini"></el-input>
                    <el-input v-model="searchForm.authorityname" placeholder="权限名称" style="margin-right:15px;width:140px;" clearable size="mini"></el-input>
                    <el-button type="primary" size="mini" @click="checkData">查询</el-button>
                </div>
                <div class="leftIcon">
                    <el-tooltip class="item" effect="dark" content="新增" placement="top">
                        <el-button class="editBtn" icon="el-icon-plus" size="mini" @click="manage('add')">

                        </el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <el-button size="mini" icon="el-icon-edit-outline" class="editBtn" @click="manage('edit')">

                        </el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button size="mini" icon="el-icon-delete" class="deleteBtn" @click="manage('delete')">

                        </el-button>
                    </el-tooltip>
                </div>
            </div>
            <BaseTable :loading="isLoading" :data="tableList" :tableHeight="tableHeight" :columns="columns" :pagination="queryall" @size-change="sizeChange" @current-change="pageChange" @details='getRowData'></BaseTable>
        </div>
        <el-drawer :title="type == 'add'?'新增第三方授权关联权限信息':'编辑第三方授权关联权限信息'" :visible.sync="managePageShow" direction="rtl" size="30%" :append-to-body="true">
            <authorityListManagePage :rowId='rowId' :parentId='parentId' v-if="managePageShow" :close='close' :type='type'></authorityListManagePage>
        </el-drawer>
    </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import authorityListManagePage from './authorityListManagePage' //第三方授权关联权限 增改页面
export default {
    name: 'detailList',
    components: {
        BaseTable,
        authorityListManagePage
    },
    props: {
        //第三方授权id
        parentId: {
            type: String | Number
        },
    },
    computed: {
        //表格高度
        tableHeight: function () {
            return this.$store.state.tableHeight + 40
        }
    },
    mounted() {
        //获取字段列表
        this.getTableData();
    },
    data() {
        return {
            rowId: '',//行id
            isLoading: false,//加载列表时的loading
            tableList: [],//表格数据
            //表头
            columns: [
                {
                    prop: 'authorityCode',
                    label: '权限编码',
                },
                {
                    prop: 'authorityName',
                    label: '权限名称',
                },
                {
                    prop: 'createName',
                    label: '创建人',
                },
                {
                    prop: 'createTime',
                    label: '创建时间',
                },
                {
                    prop: 'updateName',
                    label: '更新人',
                },
                {
                    prop: 'updateTime',
                    label: '更新时间',
                },
            ],
            // 分页数据
            queryall: {
                totalNum: 10,
                startpage: 1,
                pagesize: 15
            },
            searchForm: {
                authoritycode: '',//权限编码
                authorityname: '',//权限名称
            },
            type: '',//状态,新增或编辑
            managePageShow: false,//是否展示新增或编辑
        }
    },
    methods: {
        /**
       * @description: 关闭
       * @param {*}
       * @return {*}
       * @author: zhangzhanhua
       */
        close() {
            this.managePageShow = false
            this.checkData()
        },
        /**
        * @description: 获取一行数据
        * @param {*}
        * @return {*}
        * @author: zhangzhanhua
        */
        getRowData(val) {
            this.rowId = val.id //赋值当前行id
        },
        /**
       * @description: 管理增删改按钮
       * @param {*}
       * @return {*}
       * @author: zhangzhanhua
       */
        manage(type) {
            // 删除或编辑时需要选中状态
            if (type == 'edit' || type == 'delete') {
                if (!this.rowId) {
                    this.$message.error('请选择一条数据')
                    return
                }
            }
            this.type = type //状态
            if (type == 'add') { //新增打开弹窗
                this.managePageShow = true
                return
            }
            if (type == 'edit') { //编辑打开弹窗
                this.managePageShow = true
                return
            }
            if (type == 'delete') { //删除
                this.delExAuthority() //删除函数
                return
            }
        },
        /**
       * @description: 删除权限
       * @param {*}
       * @return {*}
       * @author: zhangzhanhua
       */
        delExAuthority() {
            let _this = this
            _this.$confirm('确认删除该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // _this.isLoading = true
                _this.$http.delete(`/${this.$ServiceName}/api/external/exauthorityrelation/${this.$version}/deletebyid`, {
                    params: {
                        id: this.rowId //当前行id
                    }
                }).then(res => {
                    // _this.isLoading = false
                    if (res.data.success) {
                        _this.$message.success(res.data.msg)
                        _this.checkData()
                    } else {
                        _this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => {

            });

        },
        /**
       * @description: 页数改变
       * @param {*} val
       * @return {*}
       * @author: zhangzhanhua
       */
        sizeChange(val) {
            this.queryall.pagesize = val
            this.getTableData()
        },
        /**
         * @description: 页码改变
         * @param {*} val
         * @return {*}
         * @author: zhangzhanhua
         */
        pageChange(val) {
            this.queryall.startpage = val
            this.getTableData()
        },
        /**
         * @description: 查询
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        checkData() {
            this.queryall.startpage = 1
            this.getTableData()
        },
        /**
         * @description: 获取列表数据
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        getTableData() {
            this.rowId = ''
            let params = { ...this.searchForm, ...this.queryall }
            params.thirdauthid = this.parentId //第三方授权id
            this.$delete(params, 'totalNum')
            this.isLoading = true
            this.$http.get(`/${this.$ServiceName}/api/external/exauthorityrelation/${this.$version}/listall`, {
                params: params
            }).then(res => {
                this.isLoading = false
                if (res.data.success) {
                    this.queryall.totalNum = res.data.data.totalNum
                    this.tableList = res.data.data.pages
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
/deep/ .el-drawer__body {
    background-color: #f5f7fa;
}
/deep/ .el-drawer__header {
    background-color: #f5f7fa;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}
.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search_input {
        display: flex;
        align-items: center;
        height: 50px;
    }
}
.userBtn {
    z-index: 100;
    text-align: right;
    padding-right: 20px;
    border-top: 1px solid #c8cfde;
    background-color: #f5f7fa;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    line-height: 50px;
}
.page {
    background: #ffffff;
    text-align: right;
    border-radius: 0 0 4px 4px;
    padding: 5px 20px;
}
</style>
